<script>
export default {
    name: "taskPublish",
    data() {
        return {
            columns: [
                {
                    title: "id",
                    key: "id",
                    sortable: true,
                    fixed: "left",
                    width: 50,
                },
                {
                    title: "任务名称",
                    key: "taskName",
                    sortable: true,
                },
                {
                    title: "任务详情",
                    key: "taskDesc",
                },
                {
                    title: "相关组织",
                    key: "relatedOrg",
                },
                {
                    title: "任务状态",
                    slot: "status",
                    tooltip: true,
                },
                {
                    title: "开始时间",
                    key: "startTime",
                },
                {
                    title: "结束时间",
                    key: "endTime",
                },
                {
                    title: "参与者",
                    width: 240,
                    align: "center",
                    slot: "tester",
                    tooltip: true,
                },
                {
                    title: "按钮",
                    width: 160,
                    align: "center",
                    fixed: "right",
                    slot: "action",
                }
            ],
            baseData: [], //全部数据
            baseType: "task",
            isShow: false,
            isCreate: false,
            changeData: {}, //需要修改的数据
            addTesterData: {
                active: false,
                testers: [],
                available_testers: {}, //获得测试者的信息
            }, //添加tag的数据
            statusStr: {
                0: "未发布",
                1: "已发布",
                2: "已结束",
            },
            dogColor: {
                0: "primary", //等待接受
                1: "warning", //已接收未完成
                2: "success", //已完成
                3: "error", //未接收
            }
        };
    },
    methods: {
        handleCreate() {
            this.changeData = {};
            this.changeData.id=-1;
            this.changeData.startTime=null;
            this.changeData.endTime=null;
            this.isCreate = true;
            this.isShow = true;
        },
        handleChange(data) {
            this.changeData = data;
            this.isCreate = false;
            this.isShow = true;
        },
        handleDelete(index) {
            this.confirm(() => {
                this.$api.post("asset/task/delete/" + index).then((res) => {
                    this.info(res.msg);
                    this.renew();
                });
            });
        },
        handleSubmit() {
            console.log("changeData:");
            delete this.changeData.joinedTesters;
            console.log(this.changeData);
            var url = this.changeData.id == -1 ?
                "asset/task/create" :
                "asset/task/update";
            this.$api.post(url, this.changeData).then((res) => {
                this.info(res.msg);
                this.renew();
            });
        },
        handleDeleteTester(tag_id) {
            this.confirm(() => {
                this.$api.post("asset/task/tester/delete/" + tag_id).then((res) => {
                    this.info(res.msg);
                });
                this.changeData.joinedTesters =
                    this.changeData.joinedTesters
                        .filter((item) => { return item.id != tag_id; });
                //直接在本地修改从后端获取数据
            });
        },
        handleAddTester() {
            this.addTesterData.testers=[];
            this.$api.get("asset/task/tester/info").then((res) => {
                this.addTesterData.available_testers = res.data.data.filter((item) => {
                    for (let i in this.changeData.joinedTesters)
                        if (this.changeData.joinedTesters[i].userId == item.id)
                            return false;
                    return true;
                });
                // console.log(this.addTesterData.available_testers);
                this.addTesterData.active = true;
            });
        },
        handleSubmitTester() {
            var testers=this.addTesterData.testers;
            for(var i in testers){
                this.$api.post("asset/task/tester/create",
                {task_id:this.changeData.id,user_id:testers[i]}).then((res)=>{
                    console.log(res);
                });
            };
            setTimeout(this.renew(),2000);
        },
        confirm(func) {
            this.$Modal.confirm({
                title: "确认框",
                onOk: func,
            });
        },
        renew() {
            this.$api.get("asset/task/list").then((res) => {
                this.baseData = res.data.data;
                console.log(this.baseData);
            });
        },
        info(message) {
            this.$Notice.info({
                title: "提示",
                desc: message,
            });
        },
    },
    created() {
        this.renew();
    }
}
</script>
<template>
    <div class="main_container">
        <Modal v-model="isShow" title="资产信息" @on-ok="handleSubmit" draggable>
            <Modal v-model="addTesterData.active" @on-ok="handleSubmitTester" title="添加参与者">
                <Space>
                    <span>参与者:</span>
                    <Select v-model="addTesterData.testers" style="width: 400px;" multiple>
                        <Option v-for="tester in addTesterData.available_testers" :value="tester.id" :key="tester.id">
                        {{ tester.username }}</Option>
                    </Select>
                </Space>
            </Modal>
            <Form :label-width="90">
                <FormItem label="任务名称">
                    <Input type="text" v-model="changeData.taskName" />
                </FormItem>
                <FormItem label="任务详情">
                    <Input type="textarea" v-model="changeData.taskDesc" />
                </FormItem>
                <FormItem label="相关组织">
                    <Input type="text" v-model="changeData.relatedOrg" />
                </FormItem>
                <FormItem label="任务状态">
                    <Select v-model="changeData.taskStatus">
                        <Option :value=0 label="未发布"></Option>
                        <Option :value=1 label="已发布"></Option>
                        <Option :value=2 label="已结束"></Option>
                    </Select>
                </FormItem>
                <FormItem label="可参与者" v-if="!isCreate">
                    <Tag v-for="tester in changeData.joinedTesters" closable @on-close="handleDeleteTester(tester.id)"
                        type="dot" :color="dogColor[tester.finishStatus ]">
                        {{ tester.username }}
                    </Tag>
                    <Button type="dashed" size="small" @click="handleAddTester()">
                        <Icon type="md-add" />
                        添加tag
                    </Button>
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Button type="success" class="add_btn" @click="handleCreate()">添加资产</Button>
        </Row>
        <div class="table_container">
            <Table highlight-row border :columns="columns" :data="baseData" width="1115" height="450">
                <template #action="{ row }">
                    <Space>
                        <Button type="info" @click="handleChange(row)">修改</Button>
                        <Button type="error" @click="handleDelete(row.id)">删除</Button>
                    </Space>
                </template>
                <template #tester = "{ row }">
                    <Tag v-for="tester in row.joinedTesters" type="dot" :color = "dogColor[tester.finishStatus ] ">
                        <!-- <Icon :type="tester.accept ? 'ios-checkmark-circle' : 'ios-close-circle'"
                            :color="tester.accept ? 'green' : 'red'" size="18">
                        </Icon> -->
                        {{ tester.username }}
                    </Tag>
                </template>
                <template #status="{ row }">
                    {{ statusStr[row.taskStatus] }}
                </template>
            </Table>
        </div>
    </div>
</template>
<style scoped>
.main_container {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}

.table_container {
    width: 100%;
    height: 90%;
    /* overflow: scroll; */
}

.add_btn {
    margin: 10px auto;
    margin-left: 80%;
    width: 160px;
}
</style>